<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title>绑定账号</title>
    <div data-th-replace="layout/head"></div>
</head>
<body>
    <header class="bar bar-nav">
        <a th:href="@{/mobile/uc/cash/findUserCashRecordList}" class="button button-link button-nav pull-left goBack">
            <span class="iconfont icon-fanhui"></span>
        </a>
        <h1 class='title'>绑定账号</h1>
    </header>
    <div class="content wm-content of order-content" style="background-color: #F6F6F6">
        <article class="page-infinite__wrap exam-page__wrap">
            <div class="page-group">
                <div id="page-infinite-scroll-bottom" class="page page-current">
                    <div class="content infinite-scroll native-scroll" data-type='native' data-distance="100">
                        <div class="pl75 pr75 pt5 pb5">
                            <p><span class="fs6 c-888">绑定第三方账号</span></p>
                            <div class="list-block no-mt">
                                <ul class="uAccount-list">
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-media">
                                                <em class="iconfont icon-winxin c-green" style="font-size: 1rem;"></em>
                                            </div>
                                            <div class="item-title">
                                                <section class="pl5">
                                                    微信
                                                    <span class="fs4 c-red" th:if="${#maps.isEmpty(userCashAccountMap[2])}">（未绑定）</span>
                                                    <span class="fs4 c-green" th:if="!${#maps.isEmpty(userCashAccountMap[2])}">（已绑定）</span>
                                                </section>
                                            </div>
                                            <div class="item-after">
                                                <a href="javascript:;" th:if="${#maps.isEmpty(userCashAccountMap[2])}" th:attrprepend="data-wechat=${isWeChat}" class="button button-fill button-round button-danger watch-live purple-button " onclick="bindingAppWithWeChat()">去绑定</a>
                                                <a href="javascript:;" th:if="!${#maps.isEmpty(userCashAccountMap[2])}" th:attrprepend="data-wechat=${isWeChat}" class="button button-fill button-round button-danger watch-live" onclick="bindingAppWithWeChat()">去修改</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li th:if="!${#maps.isEmpty(userCashAccountMap[2])}" class="item-content">
                                        <div class="item-inner">
                                            <div class="item-media pr5">&nbsp;</div>
                                            <div class="item-title pl75 pb5">
                                                <section class="fs6 c-666"><span>真实姓名：</span><span th:text="${userCashAccountMap[2]['realName']}"></span></section>
                                                <section class="fs6 c-666 pt5"><span>微信ID：</span><span th:text="${#strings.substring(userCashAccountMap[2]['account'],0,5)}+'***'"></span></section>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <ul class="uAccount-list" style="margin-top: .5rem;">
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-media">
                                                <em class="iconfont icon-zhifubao c-blue" style="font-size: 1rem;"></em>
                                            </div>
                                            <div class="item-title">
                                                <section class="pl5">
                                                    支付宝
                                                    <span class="fs4 c-red" th:if="${#maps.isEmpty(userCashAccountMap[1])}">（未绑定）</span>
                                                    <span class="fs4 c-green" th:if="!${#maps.isEmpty(userCashAccountMap[1])}">（已绑定）</span>
                                                </section>
                                            </div>
                                            <div class="item-after">
                                                <a href="javascript:;" th:if="${#maps.isEmpty(userCashAccountMap[1])}" class="button button-fill button-round button-danger watch-live purple-button bindAccountZfbBtn">去绑定</a>
                                                <a href="javascript:;" th:if="!${#maps.isEmpty(userCashAccountMap[1])}" class="button button-fill button-round button-danger watch-live bindAccountZfbBtn">去修改</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li th:if="!${#maps.isEmpty(userCashAccountMap[1])}" class="item-content">
                                        <div class="item-inner">
                                            <div class="item-media pr5">&nbsp;</div>
                                            <div class="item-title pl75 pb5">
                                                <section class="fs6 c-666"><span>真实姓名：</span><span th:text="${userCashAccountMap[1]['realName']}"></span></section>
                                                <section class="fs6 c-666 pt5"><span>支付宝账号：</span><span th:text="'***'+${#strings.substring(userCashAccountMap[1]['account'],2,5)}+'***'"></span></section>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <section class="pt5">
                                    <span class="fs6 c-888">提示须知：</span>
                                    <br>
                                    <span class="fs6 c-888">微信和支付宝作为支持提现的第三方个人账户平台，绑定或修改时请输入个人真实有效信息。</span>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>
    <!--绑定成功与否提示 开始-->
    <textarea id="bindAccount-ele" class="hide">
        <div class="pr pt5 pb5">
            <!--成功图标-->
            <aside class="exam-stop-icon applyWithdraw-icon"><span>&nbsp;</span></aside>
            <!--失败图标
            <aside class="exam-stop-icon checkInfo-icon"><span>&nbsp;</span></aside>-->
            <section class="text-center">
                <h3 class="" style="margin-bottom: 0;font-weight: 200;">绑定成功</h3>
                <section class="pt5">
                    <span class="fs6 c-888">您的微信账号已绑定成功</span>
                </section>
            </section>
        </div>
    </textarea>
    <div class="modal-overlay"></div>
    <!--绑定成功提示 结束-->


    <!--绑定微信 表单 开始-->
    <textarea id="bindAccountWx-ele" class="hide">
        <div class="pr pt5 pb5">
            <aside class="exam-stop-icon bindWx-icon"><span>&nbsp;</span></aside>
            <section class="text-center">
                <h3 class="" style="margin-bottom: 0;font-weight: 200;">绑定微信</h3>
                <section class="list-block" style="margin: .5rem 0 0;">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label fs6">真实姓名：</div>
                                    <div class="item-input">
                                        <input type="text" id="wxRealName" th:value="${#maps.isEmpty(userCashAccountMap[2])}?'':${userCashAccountMap[2]['realName']}" placeholder="请输入真实姓名"/>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </section>
            </section>
        </div>
    </textarea>
    <!--绑定微信 表单 结束-->
    <!--绑定微信下一步 表单 开始-->
    <textarea id="bindAccountNextWx-ele" class="hide">
        <div class="pr pt5">
            <aside class="exam-stop-icon bindWxCode-icon"><span>&nbsp;</span></aside>
            <section class="text-center">
                <h3 class="" style="margin-bottom: 0;font-weight: 200;">微信扫码完成绑定</h3>
                <section class="pt5">
                    <section class="bindEWxCode__wrap">
                        <aside class="preloader"></aside>
                        <img src="https://fimage.268xue.com/upload/0/yzl/common/2018121010/e8a069b413fe9818b30dc047f30fc157.jpg" />
                    </section>
                </section>
            </section>
        </div>
    </textarea>
    <!--绑定微信下一步 表单 结束-->

    <!--绑定支付宝 表单 开始-->
    <textarea id="bindAccountZfb-ele" class="hide">
        <div class="pr pt5 pb5">
            <aside class="exam-stop-icon bindZfb-icon"><span>&nbsp;</span></aside>
            <section class="text-center">
                <h3 class="" style="margin-bottom: 0;font-weight: 200;">绑定支付宝</h3>
                <section class="list-block" style="margin: .5rem 0 0;">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label fs6">真实姓名：</div>
                                    <div class="item-input">
                                        <input type="text" th:value="${#maps.isEmpty(userCashAccountMap[1])}?'':${userCashAccountMap[1]['realName']}" id="zfbRealName" placeholder="请输入真实姓名">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label fs6">支付宝账号：</div>
                                    <div class="item-input">
                                        <input type="text" th:value="${#maps.isEmpty(userCashAccountMap[1])}?'':${userCashAccountMap[1]['account']}" id="zfbAccount" placeholder="请输入支付宝账号">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </section>
            </section>
        </div>
    </textarea>
    <!--绑定支付宝 表单 结束-->
    <div data-th-replace="layout/footer"></div>
    <script type="text/javascript" th:src="@{{path}/front/mobile/business/user/center/account/withdraw-bindAccount.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>
